<template>
	<scroll-view class="wanlshop-page-container" scroll-y enable-back-to-top enable-flex="true"
		@scrolltoupper="handleUpper" @scrolltolower="handleLower">
		<!-- 商家数据 -->
		<view class="shopSytle" v-if="shopData">
			<view class="flex ">
				<image class="imgavatar" :src="$wanlshop.oss(shopData.avatar)" mode=""></image>
				<view class="flex1 ml24 overflow_1">
					<view class="flex_y_center">
						<view class="cu-tag  radius sm wanl-bg-pink" v-if="shopData.state == 0">个人</view>
						<view class="cu-tag  radius sm wanl-bg-blue" v-else-if="shopData.state == 1">企业</view>
						<view class="cu-tag  radius sm wanl-bg-orange" v-else-if="shopData.state == 2">旗舰</view>
						<view class="f36 fb flex1  overflow_1 flex_ac">
							<image v-if="shopData.self_suport == 1"
								style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
								src="https://img.aibbyp.com/wechatUser/allOthers/shopQJ.png" mode=""></image>
							<block class="" v-else>
								<image v-if="shopData.isself == 1"
									style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
									src="https://img.aibbyp.com/wechatUser/allOthers/shopZY.png" mode=""></image>
							</block>
							<view class="flex1 overflow_1">
								{{shopData.shopname}}
							</view>

						</view>
						<view class="f24 c3d ml16">
							距您 {{shopData.distance}}km
						</view>
					</view>
					<view class="f24 c3d mt12">
						秒送到达时间：<text style="color: #34C759;">{{shopData.flash_send_time}}</text>
					</view>
					<view class="flex_sb">
						<view class="exponent text-min wanl-gray-dark mt8">
							<text class="margin-right-xs">店铺粉丝</text> {{shopData.find_user.fans}}
						</view>
						<view class="menu" v-if="shopData.user_id != userInfor.id">
							<button v-if="shopData.isLive" class="cu-btn wlIcon wanl-bg-pink margin-right-sm"
								@click.stop="onLive(shopData.isLive.id)">
								<text class="wlIcon-icon_zhibo-mian text-bold"></text>
							</button>
							<button v-if="shopData.isFollow === 0" class="cu-btn radius-bock text-sm bg-white shopGz"
								@click.stop="handleFollow">
								<text class="wlIcon-31xuanze text-bold margin-right-xs "></text> 关注
							</button>
							<button v-else class="cu-btn radius-bock text-sm bg-white shopGz1"
								@click.stop="handleFollow">
								<text class="wlIcon-31guanbi text-bold margin-right-xs taxtName"></text> 取关
							</button>
						</view>
					</view>
				</view>

			</view>
			<!-- 优惠券 -->
			<view class="flex couponsBox overflow_1" v-if="shopData.coupons" @click='showpopup = true'>
				<block v-for="(coupons,couponsIndex) in shopData.coupons.slice(0,2)" :key="couponsIndex">
					<view class="msi2 imgSize cf f16 flex" v-if="coupons.type == 'reduction'">
						<view class="msiBac">
							￥{{coupons.price}}
						</view>
						<image style="margin-left: -4rpx;" class="iconmj"
							src="https://img.aibbyp.com/wechatUser/iconmj.png" mode="heightFix">
						</image>
					</view>
					<view class="msi1 imgSize cf f16 flex" v-if="coupons.type == 'discount'">
						<view class="msiBac">
							{{coupons.discount}}
						</view>
						<image class="iconzk" style="margin-left: -4rpx;"
							src="https://img.aibbyp.com/wechatUser/iconzk.png" mode="heightFix">
						</image>
					</view>
					<view class="msi3 imgSize cf f16 ml12" v-if="coupons.type == 'shipping'">
					</view>
				</block>
			</view>
			<view class="flex mt18" @click="goNavigation">
				<view class="flex1 overflow_1 f24">
					<u-icon name="map-fill" color="#ff5200"></u-icon> {{shopData.store_address}}
				</view>
				<view class="ml12">
					<image style="width: 20px;" src="https://img.aibbyp.com/wechat/images/dh.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>


		<!-- 自定义首页 -->
		<!-- 下面的动态样式 -->
		<!-- backgroundImage : 'url(' + $wanlshop.oss(pageModules.page ? pageModules.page.style.pageBackgroundImage : '', 414, 0, 1, 'transparent', 'png') + ')', -->
		<view v-if="pageModules" :style="{
				backgroundColor : pageModules.page ? pageModules.page.style.pageBackgroundColor : '',
				backgroundRepeat : pageModules.page ? pageModules.page.style.pageBackgroundRepeat : 'repeat',
				backgroundPosition: `0 ${headTop}px`
			}" style="background-size: 100% auto;" class="shopBox">
			<view v-for="(item, index) in pageModules.item" :key="index">
				<!-- 轮播图 -->
				<wanl-page-banner v-if="item.type == 'banner'" :pageData="item" />
				<wanl-page-image v-if="item.type == 'image'" :pageData="item" />
				<!-- <wanl-page-advert-banner v-if="item.type == 'advertBanner'" :pageData="item" :advertData="adData.pageAdverts" /> -->
				<wanl-page-advert-image v-if="item.type == 'advertImage'" :pageData="item"
					:advertData="adData.pageAdverts" />
				<!-- <wanl-page-menu v-if="item.type == 'menu'" :pageData="item" /> -->
				<wanl-page-notice v-if="item.type == 'notice'" :pageData="item" />
				<wanl-page-article v-if="item.type == 'article'" :pageData="item" />
				<wanl-page-headlines v-if="item.type == 'headlines'" :pageData="item" />
				<wanl-page-search v-if="item.type == 'search'" :pageData="item" />
				<wanl-page-activity v-if="item.type == 'activity'" :pageData="item" />
				<!-- <wanl-page-category-title v-if="item.type == 'categoryTitle'" :pageData="item" /> -->
				<!-- <wanl-page-classify v-if="item.type == 'classify'" :pageData="item" /> -->
				<wanl-page-likes v-if="item.type == 'likes'" :pageData="item" :lower="likesLower" />
				<wanl-page-goods v-if="item.type == 'goods'" :pageData="item" />
				<!-- <wanl-page-groups v-if="item.type == 'groups'" :pageData="item" :isShop="shopData"/> -->
				<wanl-page-bargain v-if="item.type == 'bargain'" :pageData="item" />
				<wanl-page-seckill v-if="item.type == 'seckill'" :pageData="item" />
				<wanl-page-empty v-if="item.type == 'empty'" :pageData="item" />
				<wanl-page-division v-if="item.type == 'division'" :pageData="item" />
			</view>
			<!-- <uni-load-more status="noMore" :content-text="contentText" /> -->
			<view v-if="shopData" class="safeAreaBottom mt20">
				<wanl-shop-product :type="1" :windowHeight="sys.mainHeight" :tabbarHeight="sys.tabbarHeight"
					:tabId='tabId' :option="{shop_id: shopData.id}" />
			</view>
		</view>
		<wanl-empty v-else src="find_default3x" text="正在配置首页中..." />
		<u-popup class="sasa" v-model="showpopup" mode="bottom" border-radius="14" height="800rpx" v-if="showpopup">
			<view class="popupBox">
				<view class="f32 c3d tac">
					店铺优惠券
				</view>
				<view class="info tac f24 mt24">
					注：使用优惠券后，无法使用用户代付功能
				</view>
				<scroll-view scroll-y="true" class="scroll-popup">
					<view class="popupforBox" v-for="(item,index) in shopData.coupons" @click="clickreceive(item)">
						<view class="boxmj boxcoupons" v-if="item.type == 'reduction'">
							<view class="flex mt12">
								<view class="flex1">
									<view class="error f36 fb">
										￥{{item.price}}
									</view>
									<view class="info f24">
										满{{item.limit}}可用
									</view>
								</view>
								<view class="ml36 w260">
									<view class="">
										店铺满减券
									</view>
									<view class="info">
										{{item.pretype == 'fixed' ? '有效至:'+item.enddate :`${item.validity == 0 ? '永久':'领取后' + item.validity + '天'}到期`}}
									</view>
								</view>
							</view>
						</view>
						<view class="boxzk boxcoupons" v-if="item.type == 'discount'">
							<view class="flex mt12">
								<view class="flex1">
									<view class="error f36 fb">
										￥{{item.discount}}
									</view>
									<view class="info f24">
										满{{item.limit}}可用
									</view>
								</view>
								<view class="ml36 w260">
									<view class="">
										店铺满减券
									</view>
									<view class="info">
										{{item.pretype == 'fixed' ? '有效至:'+item.enddate :`${item.validity == 0 ? '永久':'领取后' + item.validity + '天'}到期`}}
									</view>
								</view>
							</view>
						</view>
						<view class="boxby boxcoupons" v-if="item.type == 'shipping'">
							<view class="flex mt12">
								<view class="flex1">
									<view class="error f36 fb" v-if="item.type == 'shipping'">
										包邮
									</view>
									<view class="error f36 fb" v-if="item.type != 'shipping'">
										￥{{item.price}}
									</view>
									<view class="info f24">
										满{{item.limit}}可用
									</view>
								</view>
								<view class="ml36 w260">
									<view class="">
										店铺满减券
									</view>
									<view class="info">
										{{item.pretype == 'fixed' ? '有效至:'+item.enddate :`${item.validity == 0 ? '永久':'领取后' + item.validity + '天'}到期`}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</scroll-view>
</template>

<script>
	import wanlShopProduct from '@/components/wanl-shop/shop/product';
	export default {
		name: "WanlShopPage",
		props: {
			windowHeight: {
				type: Number,
				default: 0
			},
			headHeight: {
				type: Number,
				default: 0
			},
			headTop: {
				type: Number,
				default: 0
			},
			shopData: {
				type: Object,
				default () {}
			},
			pageModules: {
				type: Object,
				default () {}
			},
			adData: {
				type: Object,
				default () {}
			}
		},
		components: {

			wanlShopProduct,

		},

		data() {
			return {
				showpopup: false,
				tabId: 'goods',
				sys: {
					type: 1,
					headTop: 0,
					headHeight: 0,
					mainHeight: 0,
					tabbarBottom: 0,
					tabbarHeight: 0,
				},
				latitude: '',
				longitude: '',
				likesLower: 0,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				userInfor: uni.getStorageSync('wanlshop:user'),
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				goodsData: [], //商品列表数据
			}
		},
		onReady() {

			let sys = uni.getSystemInfoSync(),
				headHeight = sys.safeAreaInsets.top + uni.upx2px(88),
				tabbarHeight = sys.safeAreaInsets.bottom + uni.upx2px(100);
			this.sys = {
				headTop: sys.safeAreaInsets.top,
				headHeight: headHeight,
				mainHeight: sys.windowHeight - headHeight - tabbarHeight,
				tabbarBottom: sys.safeAreaInsets.bottom,
				tabbarHeight: tabbarHeight
			}
		},
		methods: {
			clickreceive(id) { //领取优惠券
				this.$api.post({
					url: '/wanlshop/coupon/receive',
					data: {
						id: id.id
					},
					success: res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 拉起本地地图
			goNavigation() {
				if (!this.shopData.store_location) return
				let location = this.shopData.store_location.split(',')
				this.latitude = location[1]
				this.longitude = location[0]
				// #ifdef MP-WEIXIN

				uni.openLocation({
					latitude: parseFloat(location[1]),
					longitude: parseFloat(location[0]),
					name: this.shopData.shopname,
					address: this.shopData.store_address,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})

				// #endif
				// #ifdef APP-PLUS
				// 判断系统安装的地图应用有哪些, 并生成菜单按钮
				let _mapName = [{
						title: '高德地图',
						name: 'amap',
						androidName: 'com.autonavi.minimap',
						iosName: 'iosamap://'
					},
					{
						title: '百度地图',
						name: 'baidumap',
						androidName: 'com.baidu.BaiduMap',
						iosName: 'baidumap://'
					},
					{
						title: '腾讯地图',
						name: 'qqmap',
						androidName: 'com.tencent.map',
						iosName: 'qqmap://'
					},
				]
				// 根据真机有的地图软件 生成的 操作菜单
				let buttons = []
				let platform = uni.getSystemInfoSync().platform
				platform === 'android' && _mapName.forEach(item => {
					if (plus.runtime.isApplicationExist({
							pname: item.androidName
						})) {
						buttons.push(item)
					}
				})
				platform === 'ios' && _mapName.forEach(item => {
					console.log(item.iosName)
					if (plus.runtime.isApplicationExist({
							action: item.iosName
						})) {
						buttons.push(item)
					}
				})
				if (buttons.length) {
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: buttons
					}, function(e) {
						let _map = buttons[e.index - 1]
						_this.openURL(_map, platform)
					})
				} else {
					uni.showToast({
						title: '请安装地图软件',
						icon: 'none'
					})
					return
				}
				// #endif

				// #ifdef H5
				let that = this
				uni.showActionSheet({
					itemList: ['高德地图', '百度地图', '腾讯地图'],
					success: function(res) {
						that.guide(res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
				// #endif

			},
			// 打开第三方程序实际应用 app
			openURL(map, platform) {
				let _defaultUrl = {
					android: {
						"amap": `amapuri://route/plan/?sid=&did=&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`
					},
					ios: {
						"amap": `iosamap://path?sourceApplication=fuxishan_uni_client&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&mode=driving&src=ios.baidu.openAPIdemo`
					}
				}
				let newurl = encodeURI(_defaultUrl[platform][map.name]);
				console.log(newurl)
				plus.runtime.openURL(newurl, function(res) {
					console.log(res)
					uni.showModal({
						content: res.message
					})
				}, map.androidName ? map.androidName : '');
			},
			// h5 拉起地图
			guide(signMap) {
				uni.showLoading({
					title: '跳转中'
				});

				let position = {
					latitude: parseFloat(location[1]),
					longitude: parseFloat(location[0]),
					name: this.shopData.shopname,
				}
				if (position.name && position.name != '') {
					//景点位置position.name 景点经纬度lng lat
					var lng = this.longitude;
					var lat = this.latitude;
					if (signMap == 0) {
						// 高德地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								}
							}
						})
					} else if (signMap == 1) {
						// 百度地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									var delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								} else {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									let delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								}
							}
						})
					} else {
						// 腾讯地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用腾讯地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '暂不知道该景区位置',
						icon: 'none',
						duration: 2000,
					});
				}
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},

			handleFollow() {
				this.$emit('handleHandleFollow')
			},
			// 上拉刷新
			handleUpper(e) {},
			// 下拉加载
			handleLower(e) {
				this.likesLower = e.timeStamp
			}
		},
		created() {
			console.log(this.shopData)
		}
	}
</script>

<style lang="scss" scoped>
	.sasa {
		::v-deep .uni-scroll-view-content {
			height: 100% !important;
		}
	}

	.popupBox {
		padding: 20rpx 32rpx;
		background: #EEEEEE;
		// height: 100%;


		.scroll-popup {
			height: 600rpx;


		}

		.boxcoupons {
			width: 100%;
			margin-top: 20rpx;
			background-size: 100% 100%;
			height: 134rpx;
			background-repeat: no-repeat;
			padding: 20rpx 200rpx 20rpx 28rpx;

		}

		.w260 {
			width: 260rpx;
		}

		.boxmj {
			background-image: url('https://img.aibbyp.com/wechatUser/pzm.png');
		}

		.boxzk {
			background-image: url('https://img.aibbyp.com/wechatUser/pzk.png');
		}

		.boxby {
			background-image: url('https://img.aibbyp.com/wechatUser/pby.png');
		}
	}

	.couponsBox {
		.imgSize {
			margin-top: 10rpx;
		}

		.msiBac {
			background: linear-gradient(90deg, #FD5241 0%, #FE7046 23%);
			// height: 18rpx;
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			padding: 0 8rpx;
		}

		.iconmj {
			width: 156rpx;
			height: 32rpx;
		}

		.iconzk {
			width: 86rpx;
			height: 32rpx;
		}

		.msi1 {
			height: 32rpx;
			padding: 0 10rpx;
			line-height: 32rpx;

		}

		.msi2 {
			height: 32rpx;
			padding: 0 10rpx;
			line-height: 32rpx;
		}

		.msi3 {
			width: 132rpx;
			height: 32rpx;
			padding: 0 10rpx;
			line-height: 32rpx;
			background-image: url('https://img.aibbyp.com/wechatUser/iconby.png');
			background-size: 100% 100%;
		}
	}

	.wanlshop-page-container {
		height: calc(100vh - 0rpx);
		overflow: scroll;

		::v-deep .uni-scroll-view-content {
			display: flex;
			flex-direction: column;
			height: 100vh;
		}

		.shopBox {
			flex: 1;
			display: flex;
			flex-direction: column;

			.safeAreaBottom {
				height: 100vh;
				overflow: hidden;
				// height: 100%;
				// padding-bottom: 100rpx;

			}


		}
	}

	.shopGz {
		background: #FF4900;
		color: #fff;
	}

	.shopGz1 {
		color: #FF4900;
		border: 1rpx solid #FF4900;
		background: #fff;

	}

	.shopSytle {
		background-color: #F2F2F2;
		margin: 0 16rpx 16rpx 16rpx;
		border-radius: 14rpx;
		padding: 24rpx 36rpx;

		.imgavatar {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
		}
	}

	.wanlshop-shop-container {
		&__shop {
			display: flex;
			align-items: center;
			justify-content: space-between;


			.info {
				width: calc(100% - 260rpx);
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				height: 85rpx;

				.name {
					width: 90%;
				}

				.exponent {
					display: flex;
				}
			}

			.menu {
				text-align: right;
				width: 260rpx;
			}
		}
	}
</style>